<!DOCTYPE html> 
<html>
 
<head> 
<meta charset="utf-8"> 
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"> 
<meta name="viewport" content="user-scalable=yes"> 
-->

<title>Live Board</title> 
<!--
<link rel="stylesheet" href="css/jquery.mobile-1.0b3.min.css" /> 
-->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<link type="text/css" href="css/lb.css" rel="stylesheet" /> 

<style>
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}

</style>

<!--
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0b3.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
-->
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
 
        
<script type="text/javascript" src="js/lb.js"></script>
<script type="text/javascript" src="bbox.js"></script>
<script type="text/javascript" src="websock.js"></script>
<script type="text/javascript" src="sync.js"></script>
<script type="text/javascript" src="db.js"></script>
<script type="text/javascript" src="ui.multiselect.js"></script>
<script type="text/javascript" src="js/main.js"></script>

</head> 
 
<body> 
 
<div data-role="page" id="main"> 
 
	<div data-role="header" id="header" data-theme="b"> 
		<h1>Live Board</h1> 
    <div id="hdrmsg">
      <a href="index.html" class="ui-btn-right" data-role="button">Sign In</a>
    </div>
    <div data-role="navbar">
		<ul>
			<li><a id="skype_btn" href="#">Skype</a></li>
			<li><a id="chat_btn" href="#">Chat</a></li>
			<li><a id="share_btn" data-rel="dialog" href="#sharedialog_jqm">Share</a></li>
			<li><a id="save_btn" href="#">Save</a></li>
			<li><a id="load_btn" href="#">Load</a></li>
		</ul>
    </div><!-- /navbar -->
  </div><!-- header -->
 

	<div data-role="content">	
    <div id="chatarea" class="ui-corner-bottom ui-bar-b">
      <div id="chatoutput">
      </div>
      <div data-role="fieldcontain">
        <textarea rows="3" name="textarea" id="chat_input"></textarea>
      </div>
      <a id="chat_send_btn" href="#" data-theme="b" data-role="button" data-inline="true">Send</a>
    </div>

    <div id="skypearea" class="ui-shadow ui-corner-bottom">
      <img src="skype.png">
    </div>

    <div id="canvasarea" class="ui-corner-all ui-shadow">
      <canvas id="canvas_id" class="ui-corner-all ui-shadow-in">
      </canvas>
      <canvas id="canvas_grid_id"></canvas>
    </div>

    <div id="textbox" class="">
      <textarea rows="3" cols="34" id="text_input"></textarea>
      <br>
      <a id="write_btn" href="#" data-role="button" data-inline="true">Write</a>
      <a id="cancel_btn" href="#" data-role="button" data-inline="true">Cancel</a>
    </div>

    <div id="settingpanel" class="ui-corner-top ui-shadow-top-right ui-bar-b">
      <div data-role="fieldcontain">
        <label for="slider">Size:</label>
        <input type="range" name="slider" id="slider" value="3" min="1" max="15"  />
      </div>
      
      <div style="height: 40px;">
        <div style="float: left; width: 25%;">Color:</div>
        <div id="c_selected" class="color-swatch" style="float: left; width: 73%; height: 30px;"></div>
      </div>

      <div class="ui-grid-d">
        <div class="ui-block-a">
          <div id="c_default" class="color-swatch"> </div>
        </div>
        <div class="ui-block-b">
          <div id="c_green" class="color-swatch" style="background: green;"> </div>
        </div>
        <div class="ui-block-c">
          <div id="c_blue" class="color-swatch" style="background: blue;"> </div>
        </div>
        <!--
        <div class="ui-block-b">
          <div id="c_green" class="color-swatch" style="background: -webkit-linear-gradient(top, rgba(180,227,145,1) 0%,rgba(97,196,25,1) 50%,rgba(180,227,145,1) 100%);"> </div>
        </div>
        <div class="ui-block-c">
          <div id="c_blue" class="color-swatch" style="background: -webkit-linear-gradient(top, rgba(197,222,234,1) 0%,rgba(138,187,215,1) 31%,rgba(6,109,171,1) 100%);"> </div>
        </div>
        -->
        <div class="ui-block-d">
          <div id="c_yellow" class="color-swatch" style="background: yellow;"> </div>
        </div>
        <div class="ui-block-e">
          <div id="c_orange" class="color-swatch" style="background: orange;"> </div>
        </div>
        <div class="ui-block-a">
          <div id="c_black" class="color-swatch" style="background: black;"> </div>
        </div>
        <div class="ui-block-b">
          <div id="c_brown" class="color-swatch" style="background: brown;"> </div>
        </div>
        <div class="ui-block-c">
          <div id="c_grey" class="color-swatch" style="background: grey;"> </div>
        </div>
        <div class="ui-block-d">
          <div id="c_white" class="color-swatch" style="background: white;"> </div>
        </div>
        <div class="ui-block-e">
          <div id="c_red" class="color-swatch" style="background: red;"> </div>
        </div>
      </div> 
    </div> <!-- settingpanel -->
  </div> <!-- content -->

  <div id="toolbar" data-role="footer" data-theme="b" class="ui-bar"> 
    <div class="ui-grid-b">
      <div class="ui-block-a">
        <div id="ctrl_btn" data-role="controlgroup" data-type="horizontal" style="margin-left: 3em;">
        <input type="radio" id="textflag" name="flag_radio" value="text" /><label style="margin-right: 0px; padding: 6px;" for="textflag">Text</label>
        <input type="radio" id="drawflag" name="flag_radio" value="draw" checked=checked /><label style="margin-right: 0px; padding: 6px;" for="drawflag">Draw</label>
        <input type="radio" id="eraseflag" name="flag_radio" value="erase"/><label style="margin-right: 0px; padding: 6px;" for="eraseflag">Erase</label>
        </div>
      </div>
      <div class="ui-block-b">
        <div class="ui-grid-b">
          <div class="ui-block-a">
            <a id="prev_btn" href="#" data-role="button" data-icon="arrow-l" data-iconpos="top" style="font-size: 0.7em;">Prev</a>
          </div>
          <div class="ui-block-b">
            <div id="pagenum" style="padding-left: 10px;">Page: </div>
          </div>
          <div class="ui-block-c">
            <a id="next_btn" href="#" data-role="button" data-icon="arrow-r" data-iconpos="top" style="font-size: 0.7em; float: right;">Next</a>
          </div>
        </div>
      </div>
      <div class="ui-block-c">
        <div style="float: right; margin-right: 4em;">
          <a id="undo_btn" href="#" data-role="button" data-icon="back" data-iconpos="top" style="font-size: 0.7em;">Undo</a>
          <a id="redo_btn" href="#" data-role="button" data-icon="forward" data-iconpos="top" style="font-size: 0.7em;">Redo</a>
          <a id="reset_btn" href="#" data-role="button" data-icon="refresh" data-iconpos="top" style="font-size: 0.7em;">Reset</a>
          <a id="setting_btn" href="#" data-role="button" data-icon="gear" data-iconpos="top" style="font-size: 0.7em;">Settings</a>
        </div>
      </div>
    </div>
  </div> <!-- footer/toolbar -->
</div><!-- /page one --> 
 
<div data-role="page" id="sharedialog_jqm" data-theme="b"> 
 
	<div data-role="header"> 
		<h1>Share</h1> 
	</div><!-- /header --> 
 
	<div data-role="content" data-theme="b">	
    <div id="sharecontacts">
    </div>
    <div id="sharemsg" style="padding: 20px; font-size: 25px;">
    </div>
    <div id="sharectrl">
    </div>
		<p><a href="#main" data-direction="reverse" data-role="button" data-theme="b">Back</a></p>	
	</div><!-- content --> 
	
</div><!-- share dialog --> 

<div data-role="page" id="joindialog_jqm" data-theme="b"> 
	<div data-role="header"> 
		<h1>Join</h1> 
	</div><!-- /header --> 
 
	<div data-role="content" data-theme="b">	
    <div id="joinmsg" style="padding: 20px; font-size: 25px;">
    </div>
    <div id="joinctrl">
    </div>
		<p><a href="#main" data-direction="reverse" data-role="button" data-theme="b">Back</a></p>	
  </div>

</div> <!-- join dialog -->

</body> 
</html> 
